<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jQuery.js"></script>
    <script>
        // 点击发送按钮，然后把消息发送出去
        function sendMessage(textarea) {
            // 前端页面的处理，具体发送写在主函数中
            var sendMessage = $('<br><br><li class="send"><div class="arrow"></div>' + textarea + '</li><br>');
            $(".user_message_middle ul").append(sendMessage);
            $("#textarea").val("");
        }

        //将消息显示在消息提示框中
        function setMessageInnerHTML(innerHTML) {
            var li = $('<li>' + innerHTML + '</li>')
            $(".remind ul").append(li);
        }

        $(function () {
            // 这里我们给ul下面的每个li都绑上点击事件
            $(".users ul").on("click", "li", function () {
                // 首先清空所有的消息内容
                $(".user_message_middle ul li").remove();
                $(".user_message_middle ul br").remove();
                // 通过用户列表中点击的用户来获取用户的名字
                $(".name").text($(this).text());
                $(".users ul li").css({"background-color": "#fff", "border-left": "0px"});
                $(this).css({"background-color": "#EBEBEB", "border-left": "3px solid #12B7F5"});
                jQuery(".users ul li").attr("id","0");
                jQuery(this).attr("id","1");

                //这里遍历一下，看看有没有没有看到的消息
                messageList.forEach(function (value, index, array){
                    console.log("我现在获取到的所有未读消息："+value);
                    if (value.split(":")[1] == $(".users ul li:hover").text()){
                        if (value.split(":")[0] == 1){
                            getMessage(value.split(":")[2]);
                        }else if (value.split(":")[0] == 0){
                            getMessage(value.split(":")[2]+"："+value.split(":")[3]);
                        }
                        //这里用完之后一定要记得删除哦
                        delete messageList[index];
                    }
                })

            })
        })

        //从这开始时websocket的配置

        //这里定义一个全局变量，用来储存用户组信息
        var grouplists;

        //写一个键值对，用来临时储存后端发来的消息
        var messageList = ["message"];

        //这里我们写websocket的连接
        var websocket = null;

        function connectWebSocket(nickname){

            console.log("获取到的nickname："+nickname);

            //判断当前的浏览器是否支持websocket
            if ('websocket' in  window){
                websocket = new WebSocket("ws://localhost/websocket/"+nickname);
            }else {
                alert("您的浏览器当前不支持网页聊天...");
            }

            //连接发生错误的回调方法
            websocket.onerror = function (){
                setMessageAlert('连接发生错误！！！');
            }

            //连接成功建立的回调方法
            websocket.onopen = function (){
                setMessageAlert('建立连接成功！！！');
            }

            //接收到消息的时候的回调方法
            websocket.onmessage = function (event){
                console.log("接收到的消息="+event.data);
                //这里我们通过判断id有没有被选中
                if ( $("#1").text() != event.data.split(":")[1]){
                    messageList.push(event.data);
                    $(".users ul li").each(function (index){
                        if ($(this).text() == event.data.split(":")[1]){
                            //添加消息提示
                            $(this).css("background-color","skyblue");
                        }
                    })
                }else {
                    if (event.data.split(":")[0] == 1){
                        getMessage(event.data.split(":")[2]);
                    }else if (event.data.split(":")[0] == 0) {
                        getMessage(event.data.split(":")[2]+"："+event.data.split(":")[3]);
                    }
                }
            }

            //监听窗口关闭，窗口关闭，主动关闭websocket连接，防止出现异常
            window.onbeforeunload = function (){
                websocket.close();
            }

        }

        //把消息弹出在网页上
        function setMessageAlert(message){
            alert("message :"+message);
        }

        //关闭连接
        function CloseWebSocket(){
            websocket.close();
        }

        //发送消息
        function send(message){
            //这里获取文本信息进行发送
            var receiver = $(".name").text();
            var sender = $(".user_name").text();
            var socketMsg = {message:message,receiver:receiver,sender:sender};

            //这里我们判断一下是不是群聊
            //首先设置聊天为单聊模式，如果有群名称匹配的话，那么就改为群聊
            socketMsg.type = 1;
            for (let i = 0; i < grouplists.length; i++) {
                if (grouplists[i].groupName == receiver){
                    socketMsg.type=0;
                }
            }

            //这里传回一个json类型的数据，方便后台转化为SocketMsg对象
            websocket.send(JSON.stringify(socketMsg));
        }

        // 这里我们写一个函数，让接收到的消息在user_message_middle中的ul中显示
        function getMessage(message) {
            var getmessage = $('<br><li class="get"><div class="arrow"></div>' + message + '</li><br><br>');
            $(".user_message_middle ul").append(getmessage);
        }

    </script>
    <!-- 这里就是我们看到的主界面，也就是聊天的界面 -->
</head>
<body>
    <div class="talk w">

        <!-- 对中间区域进行划分 分为三大块 左 中 右 -->

        <!-- 首先是分为上下两部分 上面显示其他内容，下面显示聊天信息 -->
        <div class="top">
            <span class="user_name"></span>
            <!-- 在头部的左边放一个头像框 -->
            <div class="profile">
                <img src="imgs/头像.jpg" alt="">
            </div>
            <!-- 在这里写一个关闭按钮，可以退回到登录界面 -->
            <button class="close" ></button>
            <script>
                $(".close").click(function () {
                    //这里断掉websocket
                    CloseWebSocket();

                    $.ajax({
                        url:"user/logout",
                        success:function (){
                            location.href="/login.html";
                        }
                    })
                })
            </script>
        </div>

        <div class="banner">
            <!-- 首先是最左边 是信息列表 占了20% -->
            <div class="user_list">
                <!-- 首先这里有一个表单，用来搜索好友 -->
                <input type="text" id="search" placeholder="search">
                <!-- 然后下面是用户列表 这里我们用列表表示 -->
                <script>

                    //在这里我们获取用户列表 使用ajax异步请求
                    $.ajax({
                        url: "index/user",
                        dataType: "json",
                        data:"get",
                        success: function (data) {
                            //这里是接入成功，然后对传回的数据进行处理
                            setMessageInnerHTML(data.name+"上线啦！！！");

                            //这个是头像旁边的名称
                            $(".user_name").text(data.name);

                            //自动登录
                            connectWebSocket($(".user_name").text());
                        },
                        error: function () {
                            alert("服务器繁忙...");
                        }
                    })

                    //这里再写一个ajax请求获取所有的朋友列表
                    $.ajax({
                        url: "index/friends",
                        dataType: "json",
                        data: "get",
                        success:function (data){
                            $.each(data,function (k,v){
                                $(".users ul").append("<li id='0'>"+v.name+"</li>");
                            })
                        }
                    })

                    //这里再写一个ajax，用来获取所有的群组信息
                    $.ajax({
                        url:"index/group",
                        dataType:"json",
                        data:"get",
                        success(data){
                            grouplists=data;
                            $.each(data,function (k,v){
                                $(".users ul").append("<li id='0'>"+v.groupName+"</li>");
                            })
                        }
                    })

                </script>
                <div class="users">
                    <ul>
                    </ul>
                </div>
            </div>
            <!-- 然后是中间的聊天区域 -->
            <div class="user_message">
                <!-- 中间聊天的部分也分为三个部分 上 对方名字以及在线状态 -->
                <div class="user_message_top">
                    <div class="name"></div>
                </div>
                <!-- 中间 聊天的内容 -->
                <div class="user_message_middle">

                    <!-- 这个地方 是比较重要的地方 -->
                    <ul>
                    </ul>

                </div>
                <!-- 下面 需要发送消息的地方 -->
                <div class="user_message_footer">
                    <textarea placeholder="请在这里输入要发送的信息" name="" id="textarea" cols="30" rows="10"></textarea>
                    <button id="send" >send</button>
                    <script>
                        // 点击send按钮，触发事件
                        $("#send").click(function () {
                            // 只有当textarea中不为空的时候才会触发
                            if ($.trim($("#textarea").val()) != null) {
                                // 这个是发送给服务器的
                                // alert($("#textarea").val());  经过测试这一步是发送出的 并且前面连接的时候没有出错，说明没问题
                                var message = $("#textarea").val()
                                // 调用函数，处理前端页面
                                sendMessage(message);
                                send(message);
                            }
                        });
                    </script>
                </div>
            </div>
            <!-- 最后是右边的消息提示框 -->
            <div class="remind" id="remind">
                <ul>
                </ul>
            </div>
        </div>

        <!-- 写一个音乐播放器 -->
        <div class="music">
            <audio src="" autoplay=""></audio>
        </div>

    </div>

</body>
</html>